<template>
	<!-- 换电站添加 -->
	<div>
		<div class="edit-top">
			添加信息
			<i class="el-icon-close" @click='cancel'></i>
		</div>
		<div class="edit-content">
			<div class="edit-title">站点信息</div>
			<div class="edit-item">
				<label>站点名称</label><input v-model="info.name" type="text" />
			</div>
			<div class="edit-item">
				<label>站点编码</label><input v-model="info.code" type="text" />
			</div>
			<div class="edit-item">
				<label>站点地址</label><input v-model="info.address" @blur="getLatLng" type="text" />
			</div>
			<div class="edit-item">
				<label>所属区域</label><select v-model="info.countyCode">
					<option v-for="item in area_list" :value="item.code">{{item.name}}</option>
				</select>
			</div>
			<div class="edit-item">
				<label>经度</label><input v-model="info.longtitude" readonly="readonly" placeholder="点击地图选择" type="text" />
			</div>
			<div class="edit-item">
				<label>纬度</label><input v-model="info.latitude" readonly="readonly" placeholder="点击地图选择" type="text" />
			</div>
			<div class="edit-item">
				<div id="container" style='height: 400px;width: 100%'></div>
			</div>
		</div>
		<div class="edit-bottom">
			<span @click='cancel'>取消</span>
			<el-button @click='save' type="primary">保存</el-button>
		</div>
	</div>
</template>

<script>
	import Global from '@/components/Global.vue'
	export default {
		data() {
			return {
				gdmap: null,
				area_list: [],
				checkAll: false,
				data: [],
				opendata: [1],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				info: {
					name: '',
					code: '',
					address: '',
					countyCode: '',
					longtitude: '',
					latitude: '',

				}
			}
		},
		mounted() {
			this.init();
			this.get_area_list();
		},
		methods: {
			init() {
				var _map = new AMap.Map('container');
				// 创建一个 Marker 实例：

				_map.setZoom(18);
				_map.on('click', this.showInfoClick);

				AMap.plugin('AMap.Geolocation', function() {
					var geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：5s
						buttonPosition: 'LB', //定位按钮的停靠位置
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

					});
					_map.addControl(geolocation);
					geolocation.getCurrentPosition(function(status, result) {
						if (status == 'complete') {
							//  alert(1);//onComplete(result)
						} else {
							// alert(2);// onError(result)
						}
					});
				});
				this.gdmap = _map;

			},
			getLatLng() {
				if(this.info.address == '')return;
				
				var self = this;
				var geocoder = new AMap.Geocoder({
					city: "", //城市，默认：“全国”
					radius: 500 //范围，默认：500
				});

				geocoder.getLocation(self.info.address, function(status, result) {
					if (status === 'complete' && result.info === 'OK') {
						var point = self.geocoder_CallBack(result);
						console.log(point);
						var marker = new AMap.Marker({
							position: new AMap.LngLat(point.lng, point.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
						});
						self.info.longtitude = point.lng;
						self.info.latitude = point.lat;
						self.gdmap.clearMap();
						self.gdmap.add(marker);
						self.gdmap.setZoom(16);
						self.gdmap.setCenter([point.lng, point.lat]);
					}
				});
			},

			geocoder_CallBack(data) {
				//地理编码结果数组
				var geocode = data.geocodes;
				var obj = {
					lng: geocode[0].location.lng,
					lat: geocode[0].location.lat,
					adr: geocode[0].formattedAddress
				}
				return obj;
			},
			showInfoClick(e) {
				this.info.longtitude = e.lnglat.getLng();
				this.info.latitude = e.lnglat.getLat();
				var marker = new AMap.Marker({
					position: new AMap.LngLat(this.info.longtitude, this.info.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				});
				this.gdmap.clearMap();
				this.gdmap.add(marker);
				
			},
			get_area_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'admin/sysProvince/findPage', {
						"limit": "10000",
						"page": "1"
					})
					.then(function(res) {
						if (res != '') {
							self.area_list = res.data.list;
							self.info.countyCode = self.area_list[0].code;
						}
				
					})
			},
			handleCheckAllChange(val) {
				if (this.checkAll) {
					this.$refs.tree.setCheckedNodes(this.data);
				} else {
					this.$refs.tree.setCheckedKeys([]);
				}
			},

			save() {
				if (this.info.name == "") {
					this.$popup.open('站点名称不能为空');
					return;
				}
				if (this.info.code == "") {
					this.$popup.open('站点编码不能为空');
					return;
				}
				if (this.info.address == '') {
					this.$popup.open('地址不能为空');
					return;
				}
				if (this.info.longtitude == '') {
					this.$popup.open('经纬度不能为空');
					return;
				}
				var self = this;
				this.$axios.post(this.$global.serverIp + 'station/station/save', self.info)
					.then(function(res) {
						if (res != '') {
							self.success('添加成功');
						}
					})
			},
			success(content) {
				var self = this;
				this.$alert(content, '提示', {
					confirmButtonText: '确定',
					callback: action => {
						self.$emit("saveAdd", 2);
					}
				});
			},
			cancel() {
				this.$emit("saveAdd", 1);
			}
		}
	}
	import '@/assets/css/edit.css'
</script>
